<template>
  <div class="main">
    <el-card shadow="always" class="card">
      <div slot="header">
        <el-button type="primary" size="small" @click="add">新增</el-button>
      </div>
      <el-table :data="list" border>
        <el-table-column type="index" label="序号" fixed="left" />

        <el-table-column label="商品图片" width="150">
          <template slot-scope="scope">
            <img
              :src="scope.row.pic"
              style="width: 100px; height: 100px"
              alt=""
            />
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="productSn"
          label="活动时间"
          width="300"
        >
          <template slot-scope="scope">
            <p>开始时间: {{ scope.row.promotionStartTime }}</p>
            <p>结束时间: {{ scope.row.promotionEndTime }}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="productSn"
          label="是否过期"
          width="100"
        >
          <template slot-scope="scope">
            <p>
              {{
                judgeTime(
                  scope.row.promotionStartTime,
                  scope.row.promotionEndTime
                )
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="商品名称"
          width="300"
        />
        <el-table-column
          align="center"
          prop="brandName"
          label="品牌名称"
          width="250"
        />

        <el-table-column
          align="center"
          prop="price"
          label="商品价格"
          width="150"
        />
        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="goDelete(scope.row)">
              <span style="color: red">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import market from '@/api/market/index'
export default {
  data() {
    return {
      list: []
    }
  },
  methods: {
    judgeTime(startTime, endTime) {
      var num = new Date().getTime() - new Date(endTime).getTime()
      return num > 0 ? '过期' : '否'
    },
    getlist() {
      market.getMarketList().then((res) => {
        console.log(res)
        this.list = res.data.items
      })
    },
    add() {},
    goDelete(row){
      market.
delMarketList(row.productId).then(res=>{
  if(res.success){
    this.getlist();
  }else{
    this.$message.error(res.message)
  }
})
    }
  },
  created() {
    this.getlist()
  }
}
</script>

<style scoped lang='scss'>
.card {
  margin: 30px;
}
</style>